<script lang="ts" setup>
import { NPopover, NButton, NIcon } from 'naive-ui'
import { PlusOutlined, UserOutlined, ForkOutlined, SwapOutlined, ThunderboltOutlined } from '@vicons/antd'

import { useFlowStore } from '../../../flowStore'

const flowStore = useFlowStore()

const props = defineProps(["node"])
</script>
<template>
    <div class="flow-operate-btn-wrapper">
        <n-popover style="width: 150px;padding: 0;" placement="right" :content-style="{ padding: 0 }" trigger="click">
            <template #trigger>
                <div>
                    <n-button v-if="flowStore.mode === '0'" class="flow-operate-btn" type="primary" size="small" circle>
                        <template #icon>
                            <n-icon><plus-outlined /></n-icon>
                        </template>
                    </n-button>
                </div>
            </template>
            <n-button style="width:100%;height:36px;" quaternary @click="flowStore.addNode(props.node.nodeId, '1')">
                <template #icon>
                    <n-icon>
                        <user-outlined />
                    </n-icon>
                </template>
                审批节点
            </n-button>
            <n-button style="width:100%;height:36px;" quaternary @click="flowStore.addNode(props.node.nodeId, '2')">
                <template #icon>
                    <n-icon>
                        <fork-outlined />
                    </n-icon>
                </template>
                条件分支
            </n-button>
            <n-button style="width:100%;height:36px;" quaternary @click="flowStore.addNode(props.node.nodeId, '4')">
                <template #icon>
                    <n-icon>
                        <swap-outlined />
                    </n-icon>
                </template>
                并行分支
            </n-button>
            <n-button style="width:100%;height:36px;" quaternary @click="flowStore.addNode(props.node.nodeId, '6')">
                <template #icon>
                    <n-icon>
                        <thunderbolt-outlined />
                    </n-icon>
                </template>
                触发器
            </n-button>
        </n-popover>
    </div>
</template>
<style scoped></style>